<template>
  <div class="page-container type-contaienr">
    <div class="type-header">
      <el-input
        v-model="blogTypes.searchVal"
        placeholder="请输入要添加的分类,左边选择该分类的等级"
        class="input-with-select"
      >
        <template #prepend>
          <el-select
            v-model="blogTypes.order"
            placeholder="Select"
            style="width: 70px"
            class="select-type"
          >
            <el-option label="1" :value="1" />
            <el-option label="2" :value="2" />
            <el-option label="3" :value="3" />
            <el-option label="4" :value="4" />
            <el-option label="5" :value="5" />
          </el-select>
        </template>
      </el-input>
      <el-button class="header-btn" type="primary" @click="handleClick">添加</el-button>
    </div>
    <el-table border :data="blogTypes.types" style="width: 100%">
      <el-table-column label="序号" width="150" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="类别" align="center">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="articleCount" label="文章数量" align="center">
        <template #default="scope">
          {{ scope.row.articleCount }}
        </template>
      </el-table-column>
      <el-table-column label="编辑" align="center">
        <template #default="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            :open-delay="300"
            placement="top"
            :hide-after="500"
          >
            <el-button
              type="danger"
              size="large"
              @click="handleDelete(scope.row.id)"
              :icon="Delete"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { IBlogType, getBlogTypes, addBlogType, deleteBlogType } from "@/api/blog";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, onBeforeMount } from "vue";
import { Delete } from "@element-plus/icons-vue";

//类型约束其
interface IBlogTypeCon {
  types: IBlogType[];
  searchVal: string;
  order: number;
}

// 文章类型
const blogTypes = reactive<IBlogTypeCon>({
  types: [],
  searchVal: "",
  order: 1,
});

// 数据请求
async function fetchData() {
  const res = await getBlogTypes();
  if (res.code === 0) {
    blogTypes.types = res.data;
    console.log(res);
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}

// 添加事件
async function handleClick() {
  const obj = {
    name: blogTypes.searchVal,
    order: blogTypes.order,
  };
  const res = await addBlogType(obj);
  if (res.code === 0) {
    fetchData();
    ElMessage({
      type: "success",
      message: "添加文章分类成功!",
    });
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}

// 删除文章分类
async function handleDelete(id: string) {
  ElMessageBox.confirm("确认删除该文章分类吗?", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await deleteBlogType(id);
    await fetchData();
    ElMessage({
      type: "success",
      message: "删除该文章分类成功",
    });
  });
}

onBeforeMount(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
.type-header {
  .input-with-select {
    width: 450px;
    margin: 20px 0;
  }

  .header-btn {
    margin-left: 30px;
  }
}
</style>
